<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            background: #fff;
            padding: 20px;
            margin: 20px auto;
            width: 82%;
            border-color: #e8f3ec;
            border-bottom: 9px solid #E7EFF1;
            box-shadow: 1px 0px 5px rgba(100, 100, 100, 0.3);
        }
        .div2 div span{
            display: inline-flex;
            width: 50px;
            height: 50px;
            border: 1px solid red ;
        }

    </style>
</head>
<body>
<div>
    <div class="div1">
        1、onclick事件 window.onload（网页加载完立即执行）<br>
        <button>修改样式</button>
    </div>
    <div class="div2">
        2、getElementByTagName逐个挑选 <br>
        <button class="btn2">修改前2个样式</button><br>
        获取当前背景div2中的span,对span增加class<br>
        <div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</div>
<script>
    window.onload=function () {
        var div1=document.getElementsByTagName("div")[1];
        var btn1=div1.getElementsByTagName("button")[0];
        btn1.onclick=function () {
            div1.style.backgroundColor="blue";
            div1.style.width="80%";
            div1.style.height="40px";
        }

        var div2=document.getElementsByClassName("div2")[0];
        var div21=div2.getElementsByTagName("div")[0];
        var spa2=div21.getElementsByTagName("span");
        var btn2=div2.getElementsByTagName("button");
        btn2[0].onclick=function () {
            spa2[0].style.background="yellow";
            spa2[1].style.background="blue";
            spa2[2].style.background="red";
            spa2[3].style.background="aqua";
        }
    }
</script>
</body>
</html>